<template>
  <div class="menu_group_wrap">
    <div class="menu_list_wrap" v-for="item in menuList" :key="item.id" @click="bindSetJump(item.path)">
      <el-icon :size="20" color="#fff">
        <component :is="item.icon"/>
      </el-icon>
      <span class="menu_name">{{ item.name }}</span>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { HomeFilled, StarFilled, HelpFilled } from '@element-plus/icons-vue';
const router = useRouter()
defineProps({
  title: {
    type: String,
    default: 'Vue Main'
  }
})

const menuList = reactive([
  {
    id: 1,
    name: '首页',
    icon: HomeFilled,
    path: '/'
  },
  {
    id: 2,
    name: 'oneApp',
    icon: StarFilled,
    path: '/app-one'
  },
  {
    id: 3,
    name: 'twoApp',
    icon: HelpFilled,
    path: '/app-two'
  }
])

const bindSetJump = (path) => {
  router.push({
    path: path
  })
}
</script>

<style scoped>
.menu_group_wrap {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #344154;
}

.menu_list_wrap {
  height: 60px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.menu_name {
  margin-left: 14px;
  font-size: 16px;
  color: #fff;
}
</style>
